<template>
  <div class="annotationsDrawer-container" :class="[visible ? 'show' : 'hide']">
    <div class="annotationsDrawer-body">
      <div class="header">
        批注<a-icon type="close" @click="handleClose()" />
      </div>
      <div class="body">
        <div class="operate-container">
          <div class="add-view-btn" @click="handleAddAnnotations()">
            <a-icon type="plus" />
            新增批注
          </div>
          <div class="view-list-btn" @click="handelOpenTable()">列表</div>
        </div>
        <div class="viewport-list">
          <div class="empty-tip" v-if="dataSource.length == 0">
            <a-empty :description="false" />
          </div>
          <div
            class="list-item"
            :class="activeIndex == index && 'active'"
            v-for="(item, index) in dataSource"
            :key="index"
          >
            <div class="name">
              <div class="name-text">
                {{ item.commentName }}
              </div>
              <div class="operate">
                <!-- 编辑 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>编辑</span>
                  </template>
                  <a-icon
                    type="edit"
                    @click.stop="handleEditorViewPort(item, index)"
                  />
                </a-tooltip>
                <!-- 删除 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>删除</span>
                  </template>
                  <a-icon
                    type="delete"
                    @click.stop="handleDelete(item, index)"
                  />
                </a-tooltip>
              </div>
            </div>
            <div class="thumbnail">
              <img :src="getImgSrc(item)" v-if="getImgSrc(item)" />
              <!-- 图片预览 -->
              <div class="preview-img">
                <div class="view-btn" @click="handelPreview(item)">预览</div>
              </div>
              <!-- 角标 -->
              <div
                class="corner-mark"
                :class="getJBClassName(item.commentType)"
              >
                {{ item.commentTypeDesc }}
              </div>
            </div>
            <div class="desc">
              <div class="desc-body" :title="item.viewportDesc">
                {{ item.commentDesc }}
              </div>
            </div>
            <div class="bottom">
              <div class="user">
                <a-icon type="user" />
                {{ item.creator }}
              </div>
              <div class="date">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <annotationsTableModal
      :visible.sync="tableModal.visible"
    ></annotationsTableModal>
    <!-- 图片预览弹窗 -->
    <previewImage
      :imgSrc="imgPreview"
      :visible.sync="imgVisible"
    ></previewImage>
  </div>
</template>

<script>
// 批注列表
import annotationsTableModal from "./annotationsTableModal";
import previewImage from "@/components/TopVUI/custom/previewImage";
import { axios } from "@/utils/request";
export default {
  name: "annotationsDrawer",
  inject: ["currentProject", "sceneSource"],
  components: {
    annotationsTableModal,
    previewImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeIndex: null,
      //新增
      addModal: {
        visible: false,
        operateType: 1,
        soucre: {},
      },
      //列表
      tableModal: {
        visible: false,
      },
      //图片预览弹窗
      imgVisible: false,
      imgPreview: "",
      dataSource: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        } else {
          this.activeIndex = null;
        }
      },
      immediate: true,
    },
  },
  methods: {
    getImgSrc(item) {
      let { bimCommentImages } = item;
      return bimCommentImages?.[0] ?? "";
    },

    //删除
    handleDelete(item, index) {
      let that = this;
      let { uuid } = item;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$post(`/probusiness/bimCommentMain/deleteData?uuid=${uuid}`)
            .then((res) => {
              let { statusCode } = res;
              if (statusCode == 200) {
                that.$message.success("删除成功！");
                that.getData();
              } else {
                this.$message.error("删除失败，请稍后重试！");
              }
            })
            .catch((_) => {})
            .finally((_) => {});
        },
      });
    },

    //查询列表数据
    getData() {
      return new Promise(async (resolve, reject) => {
        this.loading = true;
        let { foreignUuid, orgCode } = this.currentProject();
        let { sceneId } = this.sceneSource();
        axios
          .post(
            "/probusiness/bimCommentMain/getList",
            { proCode: orgCode, projid: foreignUuid, sceneId },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.dataSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.dataSource = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //新增
    handleAddAnnotations() {
      this.$emit("open");
    },

    //预览
    handelPreview(row) {
      let { bimCommentImages } = row;
      if (!bimCommentImages && bimCommentImages.length > 0) {
        return this.$message.warning("暂无图片", 1.5);
      }
      this.imgVisible = true;
      this.imgPreview = bimCommentImages?.[0] ?? "";
    },

    //列表
    handelOpenTable() {
      this.tableModal.visible = true;
    },

    //编辑
    handleEditorViewPort(row) {
      this.$parent.addAnnotationsModal.operateType = 2;
      this.$parent.addAnnotationsModal.soucre = row;
      this.$parent.addAnnotationsModal.reOpen = false;
      this.$parent.annotationsDrawer.fabric = false;
      this.$parent.addAnnotationsModal.visible = true;
    },

    //获取角标样式
    getJBClassName(type = "") {
      switch (type) {
        //设计变更
        case "commentType.01":
          return "sjbg";

        //设计缺陷
        case "commentType.02":
          return "sjqx";

        //危险源
        case "commentType.03":
          return "wxy";

        //质量问题
        case "commentType.04":
          return "zl";

        //安全问题
        case "commentType.05":
          return "aq";

        //违反规范
        case "commentType.06":
          return "wfgf";

        default:
          break;
      }
    },

    //关闭
    handleClose() {
      this.$emit("update:visible", false);
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="less" scoped>
.annotationsDrawer-container {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  pointer-events: none;
  transition: 0.3s;
  right: 8px;
  box-sizing: border-box;
  padding: 16px 0 20px 0;
  z-index: 99;
  &.hide {
    right: -100%;
  }
  .annotationsDrawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: all;
    .header {
      flex-shrink: 0;
      height: 36px;
      background: #f0f0f0;
      border-radius: 6px 6px 0px 0px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      position: relative;
      .anticon-close {
        color: #8c8c8c;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }

    .body {
      flex: 1;
      background: #fff;
      padding: 16px 0 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .operate-container {
        display: flex;
        margin: 0 16px 16px 16px;
        .view-list-btn {
          flex: 1;
          flex-shrink: 0;
          height: 32px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #d9d9d9;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 8px;
          cursor: pointer;
        }
        .add-view-btn {
          flex: 1;
          flex-shrink: 0;
          flex-shrink: 0;
          height: 32px;
          background: rgba(22, 119, 255, 0.1);
          border-radius: 4px 4px 4px 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #1677ff;
          font-size: 14px;
          cursor: pointer;
          .anticon {
            font-size: 10px;
            margin: 2px 5px 0 0;
          }
        }
      }

      .viewport-list {
        flex: 1;
        overflow: auto;
        padding: 0 16px 0 16px;
        position: relative;
        .empty-tip {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .empty-tip {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .list-item {
          height: 240px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;
          padding: 0 10px 10px 10px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          &.active {
            border: 1px solid #1677ff;
          }
          &:hover {
            .name {
              .operate {
                display: flex;
              }
            }
          }
          .name {
            height: 36px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333;
            letter-spacing: 1px;
            .name-text {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .operate {
              flex-shrink: 0;
              color: #8c8c8c;
              margin-left: 10px;
              display: none;
              .anticon {
                font-size: 16px;
                cursor: pointer;
                &:hover {
                  color: #1677ff;
                }
                &:last-child {
                  margin-left: 10px;
                }
              }
            }
          }
          .thumbnail {
            height: 120px;
            border-radius: 4px 4px 4px 4px;
            overflow: hidden;
            background: rgba(140, 140, 140, 0.1);
            margin-bottom: 10px;
            position: relative;
            &:hover {
              .preview-img {
                top: 0;
              }
            }
            .preview-img {
              position: absolute;
              z-index: 9;
              width: 100%;
              height: 100%;
              top: 100%;
              left: 0;
              background: rgba(0, 0, 0, 0.45);
              display: flex;
              align-items: center;
              justify-content: center;
              transition: 0.2s;
              .view-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                width: 56px;
                height: 28px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 4px 4px 4px 4px;
                border: 1px solid rgba(255, 255, 255, 0.5);
                cursor: pointer;
                font-size: 14px;
                color: #fff;
              }
            }
            .corner-mark {
              position: absolute;
              width: 74px;
              height: 24px;
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #fff;
              right: 0;
              top: 6px;
              box-sizing: border-box;
              padding-left: 14px;
              //设计缺陷
              &.sjqx {
                background: url("../images/icon_1.png") no-repeat;
                background-size: 100% 100%;
              }
              //设计变更
              &.sjbg {
                background: url("../images/icon_5.png") no-repeat;
                background-size: 100% 100%;
              }
              //危险源
              &.wxy {
                background: url("../images/icon_2.png") no-repeat;
                background-size: 100% 100%;
              }
              //安全问题
              &.aq {
                background: url("../images/icon_3.png") no-repeat;
                background-size: 100% 100%;
              }
              //质量问题
              &.zl {
                background: url("../images/icon_4.png") no-repeat;
                background-size: 100% 100%;
              }
              //违反规范
              &.wfgf {
                background: url("../images/icon_6.png") no-repeat;
                background-size: 100% 100%;
              }
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .desc {
            flex: 1;
            .desc-body {
              display: -webkit-box;
              display: -moz-box;
              -webkit-line-clamp: 2;
              -moz-line-clamp: 2;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              overflow: hidden;
              color: #666;
              font-size: 12px;
              line-height: 20px;
            }
          }
          .bottom {
            display: flex;
            margin-top: 6px;
            font-size: 12px;
            color: #8c8c8c;
            .user {
              margin-right: 14px;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                height: 10px;
                width: 1px;
                top: 50%;
                transform: translateY(-50%);
                background: #8c8c8c;
                right: -8px;
              }
            }
          }
        }
      }
    }
  }
  .fabric-toolbar-container {
    z-index: 222;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
